import { Component } from 'react'
import Head from '../components/Head';
// 函数组件当前获取redux供应的全局状态的方式 就是使用 useSelector这个hook
// 通过 useDispatch来获取 dispatch方法
import { useSelector ,useDispatch } from 'react-redux'
// 在更大型的开发过程当中 我们的action对象 
// 往往都是通过一个模块引入 action creator(action对象创造器)来创建的
import { setVersion  }  from '../store/actions'

// 如果使用的是 toolkit的方案 那么我们直接从对应的slice文件当中 导入action creator
import { setName } from '../newstore/userSlice';



// 在v6版本的路由当中 主要使用 hook来获取参数
import { useNavigate,useParams,useLocation ,useSearchParams,Link} from 'react-router-dom'

// class List extends Component {
//     render(){
//         return <div> <Head /> 我是列表页</div>
//     }
// }


const  List  =  ()=> {

    const loc = useLocation(); // useLocation得到一个当前 路由的location对象
    console.log('loc in the list',loc)
    // 获取参数的当中 有一个state  state就是在跳转的时候传递的参数 可以是任意的js数据类型的值
    // state的参数在页面刷新的时候不会丢失  但是如果是重新打开页面的时候 这个state并不存在
    // 或者可以这样理解  state一定是跳转的时候才能传递

    //  方式一  使用原生的 URLSearchParams自己去解析出query参数
    const searchStr = loc.search;  // location对象的search属性就是我们的query参数(search参数)
    const kfc = new URLSearchParams(searchStr);
    const a = kfc.get('a');  // 获取a参数
    const b = kfc.get('b');  // 获取b参数

    // 方式二  使用 useSearchParams 帮我们直接得到一个  URLSearchParams对象
    const [jgm,setJgm] = useSearchParams(); //  直接返回的就是一个  new URLSearchParams()对象
    const jgma = jgm.get('a');
    const jgmb = jgm.get('b');
    console.log('jgm',jgma,jgmb)


    // 获取redux供应的全局状态
    const store = useSelector((state)=> state );
    const version = useSelector(state=>state.version); // 我只要version
    const withOutVerison = useSelector(({version,...state})=>state)  //除了version

    //  useDispatch() 获取dispatch方法
    const dispatch = useDispatch();

    const newsList = [
        { id: 1,  title:'我是标题1'},
        { id: 2,  title:'我是标题2'},
        { id: 3,  title:'我是标题3'},
        { id: 4,  title:'我是标题4'},
    ]

  
    return (
        <div> 
            <Head /> 
            我是列表页 
            <div> 全局状态 { JSON.stringify(store) } </div>
            <button onClick={()=>{
                dispatch(setVersion('3.0.0'))
                // 等同于 
                // dispatch({type:'setVersion',payload: '3.0.0'})
           }}> 修改version</button>  

           <button onClick={ ()=>{
                dispatch(setName('dixon'))
           } }> 在toolkit的方案中修改name</button>
            <ul>
                { newsList.map(item=>(
                        <li key={item.id}>
                            <Link to={'/detail/'+ item.id }>
                                  { item.title }
                            </Link>    
                        </li>
                  )) 
                 }
            </ul>
        </div>
    )   

}


export default List;